<template>
	<view :style="{ paddingTop: safeAreaTop + 'px' }">
		<up-navbar :title="pageTitle" :autoBack="true" />
		<view class="avatar flex-r a-c j-c mt-3">
			<view class="flex-c a-c j-c">
				<up-avatar size="50" text="刘" fontSize="24" randomBgColor></up-avatar>
				www
			</view>
			<text class="ml-1 mr-1">vs</text>
			<view class="flex-c a-c j-c">
				<up-avatar size="50" text="北" fontSize="24" randomBgColor></up-avatar>
				Fewoj
			</view>
			<text class="ml-1 mr-1">vs</text>
			<view class="flex-c a-c j-c">
				<up-avatar size="50" text="山" fontSize="24" randomBgColor></up-avatar>
				Gkingh
			</view>
		</view>
		<view class="flex-r s-b m-1 mt-3">
			<view class="ai-dialogue flex-r s-b a-c p-1"
				@click="handleTo('/pages/home/components/personalMap/AIdialogue')">
				<view class="flex-r a-c">
					<text class="iconfont icon-zhinengAi- mr-1" />
					AI解读对话
				</view>
				<text class="iconfont icon-youjiantou" />
			</view>
			<view class="ai-dialogue ai-dialogue2 flex-r s-b a-c p-1"
				@click="handleTo('/pages/home/components/personalMap/multiuserAutonomous?type='+type)">
				<view class="flex-r a-c">
					<text class="iconfont-color icon-zizhujiedu mr-1" />
					自主解读
				</view>
				<text class="iconfont icon-youjiantou" />
			</view>
		</view>
		<view class="items">
			<view class="title flex-r a-c">
				{{type}} Penta 角色分工
			</view>
			<view class="text-box mt-1">
				<view class="avatar flex-r a-c">
					<up-avatar class="mr-1" size="26" text="西" fontSize="14" randomBgColor></up-avatar>
					XIAO西（显化者）
				</view>
				<view class="result mt-2">
					<view class="tag flex-r a-c">
						<view class="hollow-circle" />主要贡献
					</view>
					<text>决策、方向制定、领导、资源管理</text>
				</view>
				<view class="result mt-2">
					<view class="tag tag2 flex-r a-c">
						<view class="hollow-circle" />可能的挑战
					</view>
					<text>可能过于独立，倾向于独断专行，容易与家人发生冲突</text>
				</view>
			</view>
			<view class="text-box mt-1">
				<view class="avatar flex-r a-c">
					<up-avatar class="mr-1" size="26" text="明" fontSize="14" randomBgColor></up-avatar>
					小明（生产者）
				</view>
				<view class="result mt-2">
					<view class="tag flex-r a-c">
						<view class="hollow-circle" />主要贡献
					</view>
					<text>决策、方向制定、领导、资源管理</text>
				</view>
				<view class="result mt-2">
					<view class="tag tag2 flex-r a-c">
						<view class="hollow-circle" />可能的挑战
					</view>
					<text>可能过于独立，倾向于独断专行，容易与家人发生冲突</text>
				</view>
			</view>
			<!-- 解锁前的遮罩 -->
			<white-mask height="50vh" v-if="true" />
		</view>
		<view class="unlock-btn">
			<button class="button-active">立即解锁报告</button>
		</view>
	</view>
</template>

<script setup name="multiuser">
	import whiteMask from "@/components/whiteMask.vue"
	import {
		ref
	} from 'vue'
	const props = defineProps({
		pageTitle: {
			type: String,
			default: 'Fewoj - Gkingh'
		},
		type: {
			type: String,
			default: "团队"
		}
	})
	const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
	const handleTo = (url) => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
	.avatar {

		>text {
			font-size: 50rpx;
			color: #FF9191;
		}

		>view {
			font-size: 24rpx;
		}
	}

	.ai-dialogue {
		width: 344rpx;
		height: 100rpx;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 12rpx;
		background-color: #8681FF;
		box-sizing: border-box;

		.iconfont,.iconfont-color {
			margin-left: 10rpx;
			font-size: 28rpx;
		}
	}

	.ai-dialogue2 {
		background-color: #FF9281;
	}

	.items {
		padding: 20rpx 40rpx;
		position: relative;

		.title {
			width: 100%;
			height: 72rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			background: linear-gradient(270deg, #FFDFC6 0%, #EC672D 100%);
			border-radius: 36rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
		}

		.text-box {
			background: linear-gradient(90deg, #FFE6DD 0%, #FEF5EF 100%);
			border-radius: 20rpx;
			padding: 20rpx;

			.avatar {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.result {

				.tag {
					font-weight: 500;
					font-size: 24rpx;
					color: #FA6726;
					line-height: 34rpx;

					.hollow-circle {
						width: 6rpx;
						height: 6rpx;
						border: 4rpx solid #FA6726;
						border-radius: 50%;
						background-color: transparent;
						margin-right: 8rpx;
					}
				}

				.tag2 {
					color: #FF9A1F;

					.hollow-circle {
						border-color: #FF9A1F;
					}
				}

				text {
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
			}



		}
	}

	.unlock-btn {
		position: sticky;
		z-index: 1;
		bottom: 0;
		padding: 40rpx;
	}
</style>